<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="用户账号" prop="username">
        <el-input
          v-model="queryParams.username"
          placeholder="请输入用户账号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="会员昵称" prop="nickname">
        <el-input
          v-model="queryParams.nickname"
          placeholder="请输入会员昵称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="会员手机号" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入会员手机号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="会员积分" prop="pointsTotal">
        <el-input
          v-model="queryParams.pointsTotal"
          placeholder="请输入会员积分"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="上次登录" prop="lastLoginAt">
        <el-date-picker clearable
          v-model="queryParams.lastLoginAt"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择上次登录">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="注册时间" prop="createdAt">
        <el-date-picker clearable
          v-model="queryParams.createdAt"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择注册时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="更新时间" prop="updatedAt">
        <el-date-picker clearable
          v-model="queryParams.updatedAt"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择更新时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['core:members:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['core:members:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['core:members:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['core:members:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="membersList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="会员ID" align="center" prop="id" />
      <el-table-column label="用户账号" align="center" prop="username" />
      <el-table-column label="登录密码" align="center" prop="password" />
      <el-table-column label="支付密码" align="center" prop="payPassword" />
      <el-table-column label="会员昵称" align="center" prop="nickname" />
      <el-table-column label="会员头像" align="center" prop="avatar" width="100">
        <template #default="scope">
          <image-preview :src="scope.row.avatar" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="sex">
        <template #default="scope">
          <el-tag v-if="scope.row.sex === 0" type="info">未知</el-tag>
          <el-tag v-else-if="scope.row.sex === 1" type="primary">男</el-tag>
          <el-tag v-else-if="scope.row.sex === 2" type="danger">女</el-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="会员手机号" align="center" prop="phone" />
      <el-table-column label="会员积分" align="center" prop="pointsTotal" />
      <el-table-column label="会员类型" align="center" prop="memberType">
        <template #default="scope">
          <el-tag v-if="scope.row.memberType === '普通'" type="success" effect="dark">普通会员</el-tag>
          <el-tag v-else-if="scope.row.memberType === 'VIP'" type="warning" effect="dark">VIP会员</el-tag>
          <span v-else>{{ scope.row.memberType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上次登录" align="center" prop="lastLoginAt" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.lastLoginAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center" prop="createdAt" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updatedAt" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleViewDetails(scope.row)">详情</el-button>
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['core:members:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['core:members:remove']">删除</el-button>
          <el-button link type="info" icon="Location" @click="handleViewAddress(scope.row)">收货地址</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改会员信息对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="membersRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户账号" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户账号" />
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入登录密码" />
        </el-form-item>
        <el-form-item label="支付密码" prop="payPassword">
          <el-input v-model="form.payPassword" placeholder="请输入支付密码" />
        </el-form-item>
        <el-form-item label="会员昵称" prop="nickname">
          <el-input v-model="form.nickname" placeholder="请输入会员昵称" />
        </el-form-item>
        <el-form-item label="会员头像" prop="avatar">
          <image-upload v-model="form.avatar"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="未知" :value="0" />
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="会员手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入会员手机号" />
        </el-form-item>
        <el-form-item label="会员积分" prop="pointsTotal">
          <el-input v-model="form.pointsTotal" placeholder="请输入会员积分" />
        </el-form-item>
        <el-form-item label="会员类型" prop="memberType">
          <el-select v-model="form.memberType" placeholder="请选择会员类型">
            <el-option label="普通" value="普通" />
            <el-option label="VIP" value="VIP" />
          </el-select>
        </el-form-item>
        <el-form-item label="上次登录" prop="lastLoginAt" v-if="!form.id">
          <el-date-picker clearable
            v-model="form.lastLoginAt"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择上次登录">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="注册时间" prop="createdAt" v-if="!form.id">
          <el-date-picker clearable
            v-model="form.createdAt"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择注册时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间" prop="updatedAt" v-if="!form.id">
          <el-date-picker clearable
            v-model="form.updatedAt"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择更新时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 收货地址信息侧边栏 -->
    <el-drawer
      v-model="addressDrawer"
      title="收货地址信息"
      direction="rtl"
      size="500px"
      :before-close="handleCloseAddressDrawer"
    >
      <div class="address-container">
        <div v-if="addressList.length === 0" class="no-address">
          <el-empty description="暂无收货地址" />
        </div>
        <div v-else class="address-list">
          <div 
            v-for="(address, index) in addressList" 
            :key="address.id" 
            class="address-item"
            :class="{ 'default-address': address.isDefault === 1 }"
          >
            <div class="address-header">
              <span class="address-name">{{ address.receiverName }}</span>
              <span class="address-phone">{{ address.receiverPhone }}</span>
              <el-tag v-if="address.isDefault === 1" type="success" size="small">默认地址</el-tag>
            </div>
            <div class="address-content">
              <div class="address-location">
                {{ address.province }} {{ address.city }} {{ address.district }}
              </div>
              <div class="address-street">
                {{ address.street }}
              </div>
              <div class="address-coordinates" v-if="address.longitude && address.latitude">
                <span>经度: {{ address.longitude }}</span>
                <span>纬度: {{ address.latitude }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 用户详情对话框 -->
    <el-dialog 
      v-model="detailsDialog" 
      title="用户详情" 
      width="900px" 
      append-to-body
      :before-close="handleCloseDetailsDialog"
    >
      <div v-loading="detailsLoading" element-loading-text="加载中...">
        <!-- 用户统计信息 -->
        <div class="user-summary">
          <div class="user-avatar-info">
            <el-avatar 
              :size="80" 
              :src="memberDetails.avatar" 
              :icon="UserFilled"
            />
            <div class="user-basic">
              <h3>{{ memberDetails.nickname || '未知用户' }}</h3>
              <p class="user-id">用户ID: {{ memberDetails.id }}</p>
            </div>
          </div>
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-label">积分</span>
              <span class="stat-value">{{ memberDetails.pointsTotal || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">等级</span>
              <span class="stat-value">{{ memberDetails.memberType || '普通' }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">消费次数</span>
              <span class="stat-value">{{ computedMemberStats.consumptionCount }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">连续签到</span>
              <span class="stat-value">{{ computedMemberStats.continuousSignDays }}天</span>
            </div>
          </div>
        </div>

        <!-- 标签页内容 -->
        <el-tabs v-model="activeTab" class="details-tabs">
          <el-tab-pane label="基本信息" name="basic">
            <div class="tab-content">
              <div class="info-section">
                <div class="section-title">基本信息</div>
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="用户ID">{{ memberDetails.id }}</el-descriptions-item>
                  <el-descriptions-item label="用户账号">{{ memberDetails.username }}</el-descriptions-item>
                  <el-descriptions-item label="会员昵称">{{ memberDetails.nickname }}</el-descriptions-item>
                  <el-descriptions-item label="会员手机号">{{ memberDetails.phone }}</el-descriptions-item>
                  <el-descriptions-item label="性别">
                    <el-tag v-if="memberDetails.sex === 0" type="info">未知</el-tag>
                    <el-tag v-else-if="memberDetails.sex === 1" type="primary">男</el-tag>
                    <el-tag v-else-if="memberDetails.sex === 2" type="danger">女</el-tag>
                    <span v-else>-</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="会员类型">
                    <el-tag v-if="memberDetails.memberType === '普通'" type="success">普通会员</el-tag>
                    <el-tag v-else-if="memberDetails.memberType === 'VIP'" type="warning">VIP会员</el-tag>
                    <span v-else>{{ memberDetails.memberType }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="注册时间">{{ memberDetails.createdAt }}</el-descriptions-item>
                  <el-descriptions-item label="上次登录">{{ memberDetails.lastLoginAt }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-tab-pane>

<!--          <el-tab-pane label="收货地址" name="address">-->
<!--            <div class="tab-content">-->
<!--              <div class="info-section">-->
<!--                <div class="section-title">收货地址</div>-->
<!--                <div v-if="memberDetails.shippingAddresses && memberDetails.shippingAddresses.length > 0" class="address-list">-->
<!--                  <div -->
<!--                    v-for="address in memberDetails.shippingAddresses" -->
<!--                    :key="address.id" -->
<!--                    class="address-item"-->
<!--                    :class="{ 'default-address': address.isDefault === 1 }"-->
<!--                  >-->
<!--                    <div class="address-header">-->
<!--                      <span class="address-name">{{ address.receiverName }}</span>-->
<!--                      <span class="address-phone">{{ address.receiverPhone }}</span>-->
<!--                      <el-tag v-if="address.isDefault === 1" type="success" size="small">默认地址</el-tag>-->
<!--                    </div>-->
<!--                    <div class="address-content">-->
<!--                      <div class="address-location">-->
<!--                        {{ address.province }} {{ address.city }} {{ address.district }}-->
<!--                      </div>-->
<!--                      <div class="address-street">-->
<!--                        {{ address.street }}-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <el-empty v-else description="暂无收货地址" />-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-tab-pane>-->

          <el-tab-pane label="积分明细" name="points">
            <div class="tab-content">
              <div class="info-section">
                <div class="section-title">积分明细</div>
                <div v-if="memberDetails.pointRecordsList && memberDetails.pointRecordsList.length > 0">
                  <el-table :data="memberDetails.pointRecordsList" border stripe>
                    <el-table-column label="变动类型" align="center" prop="type">
                      <template #default="scope">
                        <el-tag v-if="scope.row.type === 1" type="success">签到</el-tag>
                        <el-tag v-else-if="scope.row.type === 2" type="warning">兑换</el-tag>
                        <el-tag v-else-if="scope.row.type === 3" type="danger">抽奖</el-tag>
                        <el-tag v-else-if="scope.row.type === 4" type="info">系统调整</el-tag>
                        <span v-else>{{ scope.row.type }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="积分变动" align="center" prop="points">
                      <template #default="scope">
                        <span :class="scope.row.points >= 0 ? 'points-plus' : 'points-minus'">
                          {{ scope.row.points >= 0 ? '+' : '' }}{{ scope.row.points }}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column label="变动后余额" align="center" prop="pointsBalance" />
                    <el-table-column label="描述" align="center" prop="description" />
                    <el-table-column label="关联记录ID" align="center" prop="relatedId" />
                    <el-table-column label="变动时间" align="center" prop="createdAt" />
                  </el-table>
                </div>
                <el-empty v-else description="暂无积分记录" />
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="签到记录" name="signins">
            <div class="tab-content">
              <div class="info-section">
                <div class="section-title">签到记录</div>
                <div v-if="memberDetails.signInsList && memberDetails.signInsList.length > 0">
                  <el-table :data="memberDetails.signInsList" border stripe>
                    <el-table-column label="签到日期" align="center" prop="signDate" />
                    <el-table-column label="连续天数" align="center" prop="continuousDays">
                      <template #default="scope">
                        <el-tag type="success">{{ scope.row.continuousDays }}天</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="获得积分" align="center" prop="pointsEarned">
                      <template #default="scope">
                        <span class="points-plus">+{{ scope.row.pointsEarned }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="签到后积分" align="center" prop="pointsAfterSign" />
                    <el-table-column label="签到类型" align="center" prop="signType">
                      <template #default="scope">
                        <el-tag v-if="scope.row.signType === 1" type="primary">普通签到</el-tag>
                        <el-tag v-else-if="scope.row.signType === 2" type="warning">连续奖励</el-tag>
                        <span v-else>{{ scope.row.signType }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-empty v-else description="暂无签到记录" />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="Members">
import { listMembers, getMembers, delMembers, addMembers, updateMembers, listShippingAddress, getMemberDetails } from "@/api/core/members"
import { UserFilled } from '@element-plus/icons-vue'

const { proxy } = getCurrentInstance()

const membersList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const addressDrawer = ref(false)
const addressList = ref([])

// 详情对话框相关状态
const detailsDialog = ref(false)
const memberDetails = ref({})
const activeTab = ref('basic')
const detailsLoading = ref(false)

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    username: null,
    nickname: null,
    sex: null,
    phone: null,
    pointsTotal: null,
    memberType: null,
    lastLoginAt: null,
    createdAt: null,
    updatedAt: null
  },
  rules: {
    username: [
      { required: true, message: "用户账号不能为空", trigger: "blur" }
    ],
    password: [
      { required: true, message: "登录密码不能为空", trigger: "blur" }
    ],
    phone: [
      { required: true, message: "会员手机号不能为空", trigger: "blur" }
    ],
  }
})

const { queryParams, form, rules } = toRefs(data)

// 计算属性
const computedMemberStats = computed(() => {
  if (!memberDetails.value.signInsList || memberDetails.value.signInsList.length === 0) {
    return {
      continuousSignDays: 0,
      consumptionCount: 0
    }
  }
  
  // 计算连续签到天数（取最新的连续天数）
  const continuousSignDays = memberDetails.value.signInsList[0]?.continuousDays || 0
  
  // 计算消费次数（这里可以根据实际业务逻辑调整）
  const consumptionCount = 0 // 暂时设为0，后期可以根据实际业务统计
  
  return {
    continuousSignDays,
    consumptionCount
  }
})

/** 查询会员信息列表 */
function getList() {
  loading.value = true
  listMembers(queryParams.value).then(response => {
    membersList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    username: null,
    password: null,
    payPassword: null,
    nickname: null,
    avatar: null,
    sex: null,
    phone: null,
    pointsTotal: null,
    memberType: null,
    lastLoginAt: null,
    createdAt: null,
    updatedAt: null
  }
  proxy.resetForm("membersRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加会员信息"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _id = row.id || ids.value
  getMembers(_id).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改会员信息"
  })
}

/** 查看收货地址 */
function handleViewAddress(row) {
  const memberId = row.id
  listShippingAddress(memberId).then(response => {
    if (response.data && response.data.length > 0) {
      addressList.value = response.data[0].shippingAddresses || []
    } else {
      addressList.value = []
    }
    addressDrawer.value = true
  }).catch(error => {
    proxy.$modal.msgError("获取收货地址失败")
    addressList.value = []
  })
}

/** 关闭收货地址抽屉 */
function handleCloseAddressDrawer() {
  addressDrawer.value = false
  addressList.value = []
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["membersRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateMembers(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addMembers(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除会员信息编号为"' + _ids + '"的数据项？').then(function() {
    return delMembers(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('core/members/export', {
    ...queryParams.value
  }, `members_${new Date().getTime()}.xlsx`)
}

/** 详情按钮操作 */
function handleViewDetails(row) {
  const memberId = row.id
  detailsLoading.value = true
  detailsDialog.value = true
  
  getMemberDetails(memberId).then(response => {
    memberDetails.value = response.data
    detailsLoading.value = false
  }).catch(error => {
    proxy.$modal.msgError("获取用户详情失败")
    detailsLoading.value = false
    detailsDialog.value = false
  })
}

/** 关闭详情对话框 */
function handleCloseDetailsDialog() {
  detailsDialog.value = false
  memberDetails.value = {}
  activeTab.value = 'basic'
}

getList()
</script>

<style scoped>
.address-container {
  padding: 20px;
}

.no-address {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.address-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  background-color: #fafafa;
  transition: all 0.3s ease;
}

.address-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.default-address {
  border-color: #67c23a;
  background-color: #f0f9ff;
}

.address-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.address-name {
  font-weight: bold;
  color: #303133;
}

.address-phone {
  color: #606266;
}

.address-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.address-location {
  color: #606266;
  font-size: 14px;
}

.address-street {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

.address-coordinates {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
}

.address-coordinates span {
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
}

/* 详情对话框样式 */
.user-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  margin-bottom: 20px;
  color: white;
}

.user-avatar-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-basic h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.user-id {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.user-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
}

.details-tabs {
  margin-top: 20px;
}

.tab-content {
  padding: 20px 0;
}

.info-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 4px solid #409eff;
}

.points-plus {
  color: #67c23a;
  font-weight: 600;
}

.points-minus {
  color: #f56c6c;
  font-weight: 600;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.address-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  background-color: #fafafa;
  transition: all 0.3s ease;
}

.address-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.default-address {
  border-color: #67c23a;
  background-color: #f0f9ff;
}

.address-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.address-name {
  font-weight: bold;
  color: #303133;
}

.address-phone {
  color: #606266;
}

.address-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.address-location {
  color: #606266;
  font-size: 14px;
}

.address-street {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-summary {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .user-stats {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .stat-item {
    min-width: 80px;
  }
  
  .el-descriptions {
    font-size: 12px;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-table .cell {
    padding: 8px 4px;
  }
}

@media (max-width: 480px) {
  .user-stats {
    gap: 16px;
  }
  
  .stat-item {
    min-width: 60px;
  }
  
  .stat-value {
    font-size: 16px;
  }
  
  .stat-label {
    font-size: 11px;
  }
}
</style>
